import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 底部弹出框
class CommonBottomSheet extends StatefulWidget {
  CommonBottomSheet({Key key, this.list, this.onItemClickListener})
      : assert(list != null),
        super(key: key);
  final list;
  final OnItemClickListener onItemClickListener;
  @override
  _CommonBottomSheetState createState() => _CommonBottomSheetState();
}

typedef OnItemClickListener = void Function(int index);

class _CommonBottomSheetState extends State<CommonBottomSheet> {
  OnItemClickListener onItemClickListener;
  var itemCount;
  int itemLength;
  double firstTop;
  double otherTop = 10.h;
  double itemHeight = 40.h;
  var borderColor = Colors.white;
  double circular = 10;
  @override
  void initState() {
    super.initState();
    onItemClickListener = widget.onItemClickListener;
  }

  @override
  Widget build(BuildContext context) {
    Orientation orientation = MediaQuery.of(context).orientation;
    Size screenSize = MediaQuery.of(context).size;

    var deviceWidth = orientation == Orientation.portrait
        ? screenSize.width
        : screenSize.height;
    itemLength = widget.list.length;
    firstTop = itemLength > 1 ? 10.00 : 0.00;

    /// *2-1是为了加分割线，最后还有一个cancel，所以加1
    itemCount = (widget.list.length * 2 - 1) + 1;
    var height = ((widget.list.length + 1) * itemHeight + otherTop * itemCount)
        .toDouble();
    var cancelContainer = Container(
        height: itemHeight,
        margin: EdgeInsets.only(left: 10, right: 10),
        decoration: BoxDecoration(
          color: Colors.white, // 底色
          borderRadius: BorderRadius.circular(circular),
        ),
        child: Center(
          child: SizedBox(
              height: itemHeight,
              width: double.infinity,
              child: new MaterialButton(
                //color: Colors.blue,
                textColor: Colors.black,
                splashColor: Color(0XFFB8B8B8),
                child: new Text('取消',
                    style: TextStyle(
                        fontFamily: 'Robot',
                        fontWeight: FontWeight.normal,
                        decoration: TextDecoration.none,
                        color: Color(0xff333333),
                        fontSize: 18.sp)),
                onPressed: () {
                  Navigator.of(context).pop();
                  // 延时1s执行返回
                  /* Future.delayed(Duration(seconds: 1), () {
                    Navigator.of(context).pop();
                  }); */
                },
              )),
        ));
    var listview = ListView.builder(
        itemCount: itemCount,
        itemBuilder: (BuildContext context, int index) {
          if (index == itemCount - 1) {
            return new Container(
              child: cancelContainer,
              margin: EdgeInsets.only(top: firstTop),
            );
          }
          return getItemContainer(context, index);
        });

    var totalContainer = Container(
      child: listview,
      height: height,
      width: deviceWidth * 0.98,
    );

    var stack = Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          bottom: 10,
          child: totalContainer,
        ),
      ],
    );
    return stack;
  }

  Widget getItemContainer(BuildContext context, int index) {
    if (widget.list == null) {
      return Container();
    }
    if (index.isOdd) {
      return Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        child: Divider(
          height: 0.5,
          color: borderColor,
        ),
      );
    }

    var borderRadius;
    var margin;
    var border;
    var borderAll = Border.all(color: borderColor, width: 0.5);
    var isFirst = false;
    var isLast = false;

    /// 只有一个元素
    ///
    int listIndex = index ~/ 2;
    if (widget.list.length == 1) {
      borderRadius = BorderRadius.circular(circular);
      margin =
          EdgeInsets.only(bottom: otherTop, left: otherTop, right: otherTop);
    } else if (widget.list.length > 1) {
      /// 第一个元素
      if (listIndex == 0) {
        isFirst = true;
        borderRadius = BorderRadius.only(
            topLeft: Radius.circular(circular),
            topRight: Radius.circular(circular));
        margin = EdgeInsets.only(
          left: otherTop,
          right: otherTop,
        );
      } else if (widget.list.length == listIndex + 1) {
        isLast = true;

        /// 最后一个元素
        borderRadius = BorderRadius.only(
            bottomLeft: Radius.circular(circular),
            bottomRight: Radius.circular(circular));
        margin = EdgeInsets.only(left: otherTop, right: otherTop);
      } else {
        /// 其他位置元素
        margin = EdgeInsets.only(left: otherTop, right: otherTop);
        borderRadius = BorderRadius.circular(0);
      }
    }
    border = borderAll;
    var isFirstOrLast = isFirst || isLast;

    var text = widget.list[listIndex];
    var contentText = SizedBox(
        height: itemHeight,
        width: double.infinity,
        child: new MaterialButton(
          //color: Colors.blue,
          textColor: Colors.black,
          splashColor: Color(0XFFB8B8B8),
          child: Text(text,
              style: TextStyle(
                  fontFamily: 'Robot',
                  fontWeight: FontWeight.normal,
                  decoration: TextDecoration.none,
                  color: Color(0xff333333),
                  fontSize: 18.sp)),
          onPressed: () {
            onItemClickListener(listIndex);
          },
        ));
    var center;
    if (!isFirstOrLast) {
      center = Center(
        child: contentText,
      );
    }
    var itemContainer = Container(
        height: itemHeight,
        margin: margin,
        decoration: BoxDecoration(
          color: Colors.white, // 底色
          borderRadius: borderRadius,
          border: border,
        ),
        child: center);

    var stack = Stack(
      alignment: Alignment.center,
      children: <Widget>[itemContainer, contentText],
    );
    return isFirstOrLast ? stack : itemContainer;
  }
}
